<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>商品首页</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/mystyle.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"> </script>
    <script type="text/javascript" src="js/jqthumb.js"></script>
    <script>
        //处理缩略图
        function DrawImage(hotimg){
            $(hotimg).jqthumb({
                width : '100%',//宽度
                height : '120px',//高度
                //position : { y: '50%', x: '50%'},//从图片的中间开始产生缩略图
                zoom : '1',//缩放比例
                method : 'post'//提交方法，用于不同的浏览器环境，默认为‘auto’
            });
        }
    </script>
</head>
<body>
<!-- 顶部banner -->
<div class="container">
    <div class="banner">
        <ul class="nav nav-pills topmenu">
            <li role="presentation"><a href="${pageContext.request.contextPath}/productServlet">主页</a></li>
            <li role="presentation"><a href="CommodityRegistered.jsp">用户注册</a></li>
            <li role="presentation"><a href="CommodityForgetPassword.jsp">忘记密码</a></li>
            <li role="presentation"><a href="${pageContext.request.contextPath}/feedbackServlet?demand=showAll">意见反馈</a></li>
        </ul>
    </div>
</div>

<!-- 导航菜单-->
<div class="container showMove">
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-info" ><a href="${pageContext.request.contextPath}/productServlet?demand=queryKitchen&src=home" class="btn-info">厨卫专区</a></button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-info"><a href="${pageContext.request.contextPath}/productServlet?demand=queryWashing&src=home" class="btn-info">洗衣机专区</a></button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-info"><a href="${pageContext.request.contextPath}/productServlet?demand=queryComputer&src=home" class="btn-info">电脑专区</a></button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-info"><a href="${pageContext.request.contextPath}/productServlet?demand=queryTV&src=home" class="btn-info">电视机专区</a></button>
        </div>
    </div>
</div>

<!-- 新品展示区-->
<div class="container showMove">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">用户登录</div>
                <div class="panel-body">
                    <form class="form-horizontal" method="post">

                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
                            <div class="col-sm-8">
                                <input name="name" type="text" class="form-control" id="inputEmail3" placeholder="用户名">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                            <div class="col-sm-8">
                                <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="密码">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-8">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">
                                        记住密码 </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-8">
                                <input formaction="${pageContext.request.contextPath}/loginServlet?demand=customer" class="btn btn-info btn btn-primary btn-default" type="submit"   value="登录">
                                <input class="btn btn-info btn btn-primary btn-default" type="submit"  value="重置">
<%--                                <button type="submit" class="btn btn-default">登录</button>--%>
<%--                                <button type="reset" class="btn btn-default">重置</button>--%>
                            </div>
                        </div>
                        <div class="center">
                            <strong style="color: #b92c28">${requestScope.loginFailed_msg}</strong>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">公告栏</div>
                <div class="panel-body">
                    <p>Panel content</p>
                    <p>Panel content</p>
                    <p>Panel content</p>
                    <p>Panel content</p>
                    <p>Panel content</p>
                    <p>Panel content</p>
                    <p>Panel content</p>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="container-fluid">
                <div class="row title">
                    <h4 class="col-md-5 h4text"> 新品上架</h4>
                    <p class="text-right"><a href="${pageContext.request.contextPath}/productServlet?demand=all&src=show"> 更多>>></a></p>
                </div>
                <div class="row">
                    <c:forEach items="${sessionScope.productCommonList}" var="product">
                        <div class="col-md-3 p_info"> <img src="${product.image}" class="img-responsive">
                            <div class="p-info">
                                <p>${product.name}</p><p> ${product.price}</p>
                                <p>
                                    <a href="${pageContext.request.contextPath}/shoppingCartServlet?demand=buy&id=${product.id}" class="btn btn-info btn-sm space">购买</a>
                                    <a href="${pageContext.request.contextPath}/productServlet?demand=detail&src=detail&id=${product.id}" class="btn btn-info btn-sm">详情</a>
                                </p>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>

<!--商品搜索-->
<div class="container showMove">
    <form action="${pageContext.request.contextPath}/productServlet?demand=query&src=home" class="form-inline center formbg" method="post">
        <label class="space">商品类别</label>
        <select class="form-control space" name="type">
            <option>厨卫系列</option>
            <option>电脑专区</option>
            <option>洗衣机系列</option>
            <option>电视机系列</option>
        </select>
        <label class="space">商品名称</label>
        <input name="name" type="text" class="form-control space" id="exampleInputName2" placeholder="Jane Doe">
        <button type="submit" class="btn btn-default space">搜索</button>
    </form>
</div>

<!-- 商品打折区 -->
<div class="container showMove">
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">特价商品</div>
                <div class="panel-body">

                    <c:forEach items="${sessionScope.productDiscountedList}" var="product">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="${product.image}" class="img-responsive"> </div>
                            <div class="col-md-6 p-info">
                                <p>${product.name}</p><p> ${product.price}</p>
                                <p>
                                    <a href="${pageContext.request.contextPath}/shoppingCartServlet?demand=buy&id=${product.id}" class="btn btn-info btn-sm space">购买</a>
                                    <a href="${pageContext.request.contextPath}/productServlet?demand=detail&src=detail&id=${product.id}" class="btn btn-info btn-sm">详情</a>
                                </p>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>


        </div>
        <div class="col-md-8">
            <div class="container-fluid">
                <div class="row title">
                    <h4 class="col-md-5 h4text"> 热销产品</h4>
                    <p class="text-right"><a href="${pageContext.request.contextPath}/productServlet?demand=all&src=show"> 更多>>></a></p>
                </div>
                <div class="row">
                    <c:forEach items="${sessionScope.productHotList}" var="product">
                        <div class="col-md-3 p_info">
<%--                            <img src="${product.image}" class="img-responsive img-thumbnail " onload="DrawImage(this)">--%>
                            <img src="${product.image}" class="img-responsive img-thumbnail ">
                            <div class="p-info">
                                <p>${product.name}</p><p> ${product.price}</p>
                                <p>
                                    <a href="${pageContext.request.contextPath}/shoppingCartServlet?demand=buy&id=${product.id}" class="btn btn-info btn-sm space">购买</a>
                                    <a href="${pageContext.request.contextPath}/productServlet?demand=detail&src=detail&id=${product.id}" class="btn btn-info btn-sm">详情</a>
                                </p>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footerbg center showMove">
    <p> Designed and built with all the love in the world by @mdo and @fat. Maintained by the core team with the help of our contributors.</p>
</div>
</body>
</html>
